<label class="label">
  <span class="icon">
    <svg
      class="w-6 h-6 text-gray-800 dark:text-white"
      aria-hidden="true"
      xmlns="http://www.w3.org/2000/svg"
      width="30"
      height="30"
      fill="none"
      viewBox="0 0 24 24"
    >
      <path
        stroke="currentColor"
        stroke-width="1.25"
        d="M7 17v1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1a3 3 0 0 0-3-3h-4a3 3 0 0 0-3 3Zm8-9a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
      ></path>
    </svg>
  </span>
  <input
    type="text"
    class="input"
    placeholder="Enter name"
    autocomplete="off"
  />
</label>

<style>
/* From Uiverse.io by Na3ar-17  - Tags: simple, icon, input, dark */
.container {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.label {
  position: relative;
  display: block;
  width: 250px;
  display: flex;
  border-radius: 6px;
  border: 2px solid #373737;
  padding: 15px 8px 15px 10px;
  text-align: left;

  .icon {
    position: absolute;
    top: 53%;
    right: 0;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    color: #c5c5c5;
  }

  .input {
    background-color: transparent;
    outline: none;
    border: none;
    color: #c5c5c5;
    font-size: 16px;
  }
}

</style>
    